<template>
    <div class="level">
        <h1>医院</h1>
        <div class="content">
            <div class="left">等级：</div>
            <ul class="hospital">
                <li :class="{ active: '' === activeLevel }" @click="changeLevel('')">全部</li>
                <li v-for="item in levelArr" :key="item.id" :class="{ active: item.value === activeLevel }"
                    @click="changeLevel(item.value)">
                    {{ item.name }}
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts" name="Level">
import { reqHospitalLevelRegionData } from '@/api/home/index'
import type { HospitalLevelAndRegionArr, HospitalLevelAndRegionResponseData } from '@/api/home/type'
import { ref, onMounted } from 'vue'
// 组件挂载完毕后，立刻查询医院的等级目录信息
onMounted(() => {
    getLevel()
})

const $emit = defineEmits(['getHosType'])

// 获取医院等级目录数据
const getLevel = async () => {
    const res: HospitalLevelAndRegionResponseData = await reqHospitalLevelRegionData('hosType')
    if (res.code === 200) {
        levelArr.value = res.data
    }
}
// 点击医院等级时，改变当前选中等级
const changeLevel = (value: string) => {
    activeLevel.value = value
    //触发自定义事件，回传最新筛选值
    $emit('getHosType', activeLevel.value)
}

// 定义用于存储等级目录信息的数组
const levelArr = ref<HospitalLevelAndRegionArr>([])

// 定义标记选中等级的数据
const activeLevel = ref<string>('')

</script>

<style scoped lang="scss">
.level {
    h1 {
        color: #7f7f7f;
        font-weight: 900;
        margin: 10px 0;
    }

    .content {
        display: flex;
        color: #696868;

        .left {
            margin-right: 10px;
        }

        .hospital {
            display: flex;

            li {
                margin-right: 10px;

                &.active {
                    color: #55a6fe;
                }
            }

            li:hover {
                color: #55a6fe;
                cursor: pointer;
            }
        }
    }
}
</style>